<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>DOMElement Test | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            #content>* {
                padding: 10px 20px;
                width: 50%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            #console {
                padding: 5px;
                border: 1px solid black;
            }
            
            #box-list {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            .box {
                width: 100px;
                height: 100px;
                margin: 10px;
                padding: 10px;
                border: 1px solid black;
                -webkit-user-select: none;
                
                color: black;
                text-shadow: 1px 1px 2px white;
                text-align: center;
                line-height: 100px;
            }
            
            #target {
                width: 100px;
                height: 100px;
            }
            
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script id="test-script">
            
            TM.loadScript("dom", "dom");
            
            /*
             * Test
             */
            TM.main(function()
            {
                // コンソール生成
                var c = TM.DebugConsole("#console");
                
                // イベントクラスを生成
                var evnet = TM.$DOMEvent( TM.$query("#event-target") );
                var eventCount = 0;
                // click イベントをセット
                evnet.click(function(){
                    ++eventCount;
                    this.html = "Event : " + eventCount;
                    
                    this.html = this.text;
                    c.log(this.html);
                });
                
                // one 用イベントクラスを生成
                var one = TM.$DOMEvent( TM.$query("#one-target") );
                // one click イベントをセット
                one.one("click", function(){
                    this.backgroundColor = "red";
                    this.html = "もう押しても呼ばれないよん♪";
                    this.element.style.lineHeight = "30px";
                    c.log(this.html);
                });
                
                // toggle 用イベントクラスを生成
                var toggle = TM.$DOMEvent( TM.$query("#toggle-target") );
                // toggle click イベントをセット
                toggle.toggle("click", [
                    function() { this.html = this.backgroundColor = "red";  c.log(this.html); },
                    function() { this.html = this.backgroundColor = "green";c.log(this.html); },
                    function() { this.html = this.backgroundColor = "blue"; c.log(this.html); },
                ]);
                
                
                // hover イベントを登録する
                var boxes = TM.$DOMElement().$queryAll(".box");
                for (var i=0,len=boxes.length; i<len; ++i) {
                    boxes[i].event.hover(function(){
                        this.element.style.boxShadow = "0px 0px 8px 2px black";
                        c.log("mouseover");
                    }).add("mouseout", function(){
                        this.element.style.boxShadow = "";
                        c.log("mouseout");
                    });
                }
                
            });
            
        </script>
        
        <script>
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
                prettyPrint();
            });
        </script>
    </head>
    
    <body>
         
        <h1>DOMElement Test | TM Lib</h1>
        
        <div id="content">
            <section>
                <h2>DOMElement Test</h2>
                <p>クリックしてちょ!!</p>
                <section id="box-list">
                    <div id="event-target" class="box">Event</div>
                    <div id="one-target" class="box">One</div>
                    <div id="toggle-target" class="box">Toggle</div>
                </section>
                <h2>Console</h2>
                <pre id="console"></pre>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
        
    </body>
</html>
